<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <!-- <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> -->
  <Test v-if="switchBtn"></Test>
  <el-button type="primary" @click="switchBtn = !switchBtn">切换</el-button>
  <Test></Test>
  <ToRefs />
  <div id="aContainer"></div>
  <teleport to="#aContainer">
  <A></A>
</teleport>
<SetupCom></SetupCom>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
import Test from './components/Test.vue'
import ToRefs from './components/ToRefs.vue'
import A from './components/A.vue'
import SetupCom from './components/Setup.vue'

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld,
    Test,
    ToRefs,
    A,
    SetupCom
  },
  setup () {
    var switchBtn = ref(true)
    var btnChange = function (val:number) {
    }
    return {
      btnChange,
      switchBtn
    }
  }
})
</script>

<style>
@import url('./assets/reset200802.css');
</style>
